<template>
	<nt-container>
		<view class="goods-order">
			<view class="goods-order-title">
				{{params.dataType==='sell'? '商品订单列表' :'我的订单列表'}}
			</view>
			<view class="goods-order-search">
				<u-search v-model="params.keywords" shape="square" bgColor="#fff" height="80rpx" :actionStyle="btnStyle"
					actionText="查询" @search="downCallback" @custom="downCallback"></u-search>
			</view>
			<view class="goods-order-subsection">
				<u-subsection mode="subsection" :list="tabs" :current="current" @change="(value)=>current=value"
					:customStyle="{height:'76rpx',background:'#fff'}" activeColor="#007aff" bgColor="#fff"
					inactiveColor="#007aff"></u-subsection>
			</view>
			<view class="goods-order-list">
				<mescroll-uni :height="listHeight" :fixed="false" @init="mescrollInit" :down="down" @down="downCallback"
					@up="upCallback">
					<view class="item-container" v-for="(item,index) in list" :key="index">
						<view class="order-item" @click="goPage(item)">
							<!-- 图片容器 -->
							<view class="order-item-left"
								@tap.stop="item.images_list.length>0?previewImage(item.images_list):null">
								<u--image radius="8" height="200rpx" width="200rpx" class="image"
									:src="getImage(item.images_list)" mode="widthFix">
								</u--image>
							</view>
							<!-- 标题 时间 	容器 -->
							<view class="order-item-right">
								<view class="r-t" style="color:#000">

									<text> 订单号：{{item.ordernumber}}</text>
								</view>
								<view class="r-t">
									<text> {{item.tocity}}</text>
									<text> {{params.statusType===4?item.cancel_date:item.c_date}}</text>
								</view>
								<view class="r-c">
									<text>{{item.goods.parts_name}}</text>

								</view>
								<view class="r-b">
									<text>数量：<text style="color: #F00;">{{item.number}}</text> </text>

									<text>总价：￥<text style="color: #F00;">{{item.total_price}}</text> </text>
								</view>
								<view class="r-b" style="font-size: 24rpx;align-items: flex-start;">
									<view class="r-b-box">
										<view class="label">出售者：</view>
										<view style="color:#000" class="userValue">{{item.sell_user_name}}</view>
									</view>
									<view class="r-b-box">
										<view class="label">购买者：</view>
										<view style="color:#000" class="userValue">{{item.buy_user_name}}</view>
									</view>

								</view>
							</view>

						</view>
						<!-- 按钮 或者 一些备注 -->
						<view class="order-item-others">
							<view class="order-cancel" v-if="item.canceluser&&params.statusType==4">
								<view class="order-cancel-title">
									订单取消信息
								</view>
								<view class="order-cancel-item" v-for="(key,idx) in 3" :key="idx">
									<view class="order-cancel-item-left">
										{{cancelObj[key].title}}:
									</view>
									<view class="order-cancel-item-right">
										{{item[cancelObj[key].key]||item.canceluser[cancelObj[key].key]}}
									</view>
								</view>
							</view>
							<!-- 按钮 -->
							<view class="order-button">
								<u-button text="确认" type="primary"
									v-if="item.powerStatus.postConfirmOrder==1&&params.dataType==='sell'"
									@click="submit(1,item.id)" class="button"></u-button>
								<u-button text="取消" type="error" v-if="item.powerStatus.postCancelOrder==1"
									class="button" @click="submit(2,item.id)"></u-button>
							</view>
						</view>
					</view>
				</mescroll-uni>
			</view>

		</view>
	</nt-container>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		getOrderPaginate,
		orderSubmit
	} from '@/api'
	import {
		appConfig
	} from "@/config"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		onLoad(options) {
			this.params.dataType = options?.dataType || 'sell'
			this.setHeight()
			uni.$on('changeList', () => {
				this.downCallback()
			})
		},
		onUnload() {
			uni.$off('changeList')
		},
		watch: {
			current(n) {
				this.params.statusType = ++n
				this.downCallback()
			}
		},
		data() {
			return {
				appConfig,
				tabs: ['待确认', '待审核', '已完成', '已取消'],
				// 或者如下，也可以配置keyName参数修改对象键名
				list: [],
				listHeight: 300,
				current: 0,
				cancelObj: {
					1: {
						title: '取消者',
						key: 'username'
					},
					2: {
						title: '取消时间',
						key: 'cancel_date'
					},
					3: {
						title: '取消备注',
						key: 'cancel_remarks'
					},
				},
				btnStyle: {
					width: "20%",
					textAlign: "center",
					lineHeight: "80rpx",
					display: "inline-block",
					background: "#1B5BC5",
					color: "#fff",
					borderRadius: "8rpx",
					marginLeft: "3%",
				},
				down: {
					auto: false
				},
				params: {
					dataType: "",
					statusType: "1",
					keywords: '',
				},
				timeline: ''
			}
		},
		methods: {
			async submit(type, id) {
				const [code, data] = await uni.showModal({
					title: `是否${type==1?'确认':'取消'}该订单？`,
					editable: type == 2,
					placeholderText: '请输入备注'
				})
				if (data?.confirm) {
					const orderData = await orderSubmit(type, {
						id,
						remarks: data?.content || ''
					})
					if (orderData.code === 1) {
						this.downCallback()
						if (type == 1) {
							// 订单页面刷新他的个人中心count数据
							uni.$emit('userCenterCount')
						}
					}
				}
			},
			goPage({
				id
			}) {
				this.nav(`/subpackage/shop/pages/shop/orderInfo?id=${id}`)
			},
			getImage(images_list) {
				let url = '/static/image/noImage.png'
				if (images_list.length > 0) {
					url = appConfig.imgCDN + images_list[0].replace(/\\/g, '/')
				}
				return url
			},
			previewImage(url, current = 0) {
				let urls = url.map(o => (o = appConfig.imgCDN + o.replace(/\\/g, "/")))
				uni.previewImage({
					urls,
					current
				})
			},
			downCallback(e) {
				this.list = []
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				this.time = new Date().getTime()
				this.getList(page.num, this.time)
			},
			async getList(page, time) {
				try {
					const {
						data
					} = await getOrderPaginate({
						...this.params,
						page

					}, false)
					if (this.time === time) {
						if (page === 1) {
							this.list = []
						}
						this.list = [...this.list, ...data.data]
						const curPageLen = data.data.length
						const totalSize = data.total
						this.mescroll.endBySize(curPageLen, totalSize)
					}
				} catch (e) {
					this.mescroll.endErr()
				}
			},
			setHeight() {
				const that = this
				uni.getSystemInfo({
					success: ({
						windowHeight
					}) => {
						setTimeout(async () => {
							await that.$nextTick()
							uni.createSelectorQuery().selectAll('.goods-order-list')
								.boundingClientRect(
									res => {
										// 获取列表定位
										that.listHeight = Math.floor(windowHeight - res[0].top -
												1) +
											'px'
									}).exec()
						})

					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.goods-order {
		font-family: 'Helvetica Neue', Helvetica, sans-serif;
		padding: 20rpx 20rpx 0 20rpx;

		&-title {
			line-height: 50rpx;
		}

		&-search {
			margin: 20rpx 0;
		}

		&-subsection {
			padding: 20rpx 0
		}
	}

	.item-container {
		padding: 20rpx 24rpx;
		border-radius: 10rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	/deep/ .order-item {
		display: flex;
		align-items: center;

		&-right {
			margin-left: 20rpx;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.r-t {
				color: #8f8f94;
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.r-c {
				font-size: 32rpx;
			}

			.r-b {
				color: #8f8f94;
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				&-box {
					display: flex;
					flex: 1;

					.userValue {
						flex: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-line-clamp: 1;
						display: -webkit-box;
						-webkit-box-orient: vertical;
					}
				}
			}
		}

	}

	.order-item-others {
		.order-cancel {
			margin-top: 10rpx;

			&-title {
				font-size: 32rpx;
			}

			&-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #8f8f94;
				font-size: 28rpx;

				&-left {}

				&-right {}
			}
		}

		.order-button {
			display: flex;
			margin-top: 20rpx;
			justify-content: center;
			align-items: center;

			.button {
				width: 45%;
			}
		}
	}
</style>